<template>
    <div>
        <el-card shadow="never">
            <div slot="header">动态表单(radio)</div>
            <DynamicForm :schema="schema" :formData="formData">
                <template v-slot:labelSlot="scope">
                    <span v-if="scope.item.model === 'num1'">
                        {{scope.item.label}}
                        <el-tooltip content="labelSlotName的使用" placement="top">
                            <FontIcon color="#409EFF" iconName="el-icon-warning" />
                        </el-tooltip>
                    </span>
                </template>
            </DynamicForm>
        </el-card>
        <el-card shadow="never">
            <div slot="header">动态表单(radioGroup)</div>
            <DynamicForm :schema="schemaGroup" :formData.sync="formDataGroup"></DynamicForm>
        </el-card>
        <div class="markdown-body">
            <CodeTpl></CodeTpl>
        </div>
    </div>
</template>

<script>
import CodeTpl from './md/radio.md';

export default {
    components: {
        CodeTpl
    },
    data() {
        return {
            schema: {
                properties: {
                    num1: {
                        label: '基本用法',
                        widget: 'radio',
                        enum: [
                            {value: '云1', label: '1', disabled: true},
                            {value: '云2', label: '2'},
                            {value: '云3', label: '3'},
                        ]
                    },
                    num2: {
                        label: '边框',
                        widget: 'radio',
                        enum: [
                            {value: '云1', label: '1', border: true},
                            {value: '云2', label: '2', disabled: true, border: true},
                            {value: '云3', label: '3', border: true},
                        ]
                    },
                    num3: {
                        label: '大小',
                        widget: 'radio',
                        enum: [
                            {value: '云1', label: '1', size: 'mini', border: true},
                            {value: '云2', label: '2', size: 'mini', border: true},
                            {value: '云3', label: '3', size: 'mini', border: true},
                        ]
                    }
                },
                grid: {
                    col: {
                        span: 12
                    }
                },
                ui: {
                    labelWidth: 120
                }
            },
            formData: {},
            schemaGroup: {
                properties: {
                    num1: {
                        label: '异步',
                        widget: 'radioGroup',
                        asyncData: (next) => {
                            return new Promise((resolve) => {
                                const list = [
                                    {value: '云1', label: '1'},
                                    {value: '云2', label: '2'},
                                    {value: '云3', label: '3'},
                                ];
                                setTimeout(() => {
                                    resolve(list)
                                }, 2000)
                            })
                        }
                    },
                    num2: {
                        label: '按钮形式',
                        widget: 'radioButtonGroup',
                        enum: [
                            {value: '大白菜', label: '1'},
                            {value: '胡萝卜', label: '2', disabled: true},
                            {value: '青菜', label: '3'},
                            {value: '韭菜', label: '4'},
                        ]
                    },
                    num3: {
                        label: '禁用',
                        widget: 'radioGroup',
                        enum: [
                            {value: '苹果', label: '1'},
                            {value: '橘子', label: '2'},
                            {value: '香蕉', label: '3'},
                            {value: '梨', label: '4'},
                        ],
                        ui: {
                            disabled: true
                        }
                    },
                    num4: {
                        label: '大小',
                        widget: 'radioButtonGroup',
                        enum: [
                            {value: '苹果', label: '1'},
                            {value: '橘子', label: '2'},
                            {value: '香蕉', label: '3'},
                            {value: '梨', label: '4'},
                        ],
                        ui: {
                            size: 'medium'
                        }
                    },
                    num5: {
                        label: '边框',
                        widget: 'radioGroup',
                        enum: [
                            {value: '苹果', label: '1', border: true},
                            {value: '橘子', label: '2', border: true},
                            {value: '香蕉', label: '3'},
                            {value: '梨', label: '4'},
                        ]
                    }
                },
                grid: {
                    col: {
                        span: 12
                    }
                }
            },
            formDataGroup: {
                num1: '1',
            }
        }
    }
}
</script>

<style>

</style>